<template>
	<view class="pages_height">
		<!-- #ifdef H5 -->
		<view class="tou">
			<u-icon name="arrow-left" size="50" @click='onfanhui'></u-icon>
		</view>
		<!-- #endif -->
		<view class="intelligent_main">
			<scroll-view :scroll-y="true" :style="{height:key_height}"
				:scroll-into-view="controlId ? bottomId : 'msg'+controlId" :scroll-with-animation="true"
				class="intelligent_chat" @click="other_click" @dragging="other_click" :show-scrollbar="false">
				<view v-for="(item, index) in msg_list" :key="index" :class="'intelligent_chat_view'+index">
					<view :class="item.left ? 'robot_word' : 'patient_word'">
						<view v-if="item.msg">
							<view>
								{{item.msg}}
							</view>
						</view>
						<view v-else>
							<view>
								{{item.title}}
							</view>
							<view v-if="item.data">
								<view v-for="(data, data_index) in item.data" :key="data.id">
									<view class="keyHighlight" v-html="data.keyHighlight" v-if="data.keyHighlight"
										@click="keyHighlight(data,data_index)"></view>
								</view>
							</view>

						</view>
					</view>
				</view>
				<view :id="'dade'+num" v-if="controlId"></view>
				<view :id="'msg'+controlId" v-else></view>
			</scroll-view>

			<view class="intelligent_input" :style="{ bottom: bottom }">
				<input type="text" placeholder-style="font-size: 30rpx;color: #C8C8C8;" placeholder="请输入…"
					:adjust-position="false" v-model="value" @confirm.prevent="input_send" :focus="fouse"
					:hold-keyboard="hold_keyboard" :confirm-hold="hold_keyboard" @focus="i_focus" @blur="blur"
					confirm-type="发送"></input>
				<view class="input_send" @touchend.prevent="input_send">
					<!--  -->
					<!-- https://yiben01.oss-cn-hangzhou.aliyuncs.com/img/921c55e21e95bf68a5d32f4aeab37bc64d2317d0_100.png -->
					<image
						src="https://yiben01.oss-cn-hangzhou.aliyuncs.com/img/921c55e21e95bf68a5d32f4aeab37bc64d2317d0_100.png"
						mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 输入框value
				value: '',
				// 输入框距底部高度（键盘显示隐藏高度变化）
				bottom: '0px',
				// 对话框数组
				msg_list: [{
					left: true,
					msg: '嗨~我是小助，您身边的智能助手~',
					data: null
				}, {
					left: true,
					msg: '请问有什么可以帮助您的？',
					data: null
				}],
				// 容器高度
				key_height: '0px',
				// 容器滚动底部定位id
				bottomId: '',
				// 数组长度，用到定位id
				num: 2,
				// 输入框聚焦
				fouse: false,
				// 键盘不收起
				hold_keyboard: true,
				// 防抖
				boolen: true,
				// 定位id
				controlId: false,
				inputHeight: 0,
			}
		},
		onLoad() {},
		watch: {
			inputHeight(n, o) {
				this.inputHeight = n
				const res_s = uni.getSystemInfoSync();
				this.key_height =
					`${res_s.windowHeight - n}px`;
			},
		},
		onShow() {
			this.keyboardHeightChange()
			this.compute_input_height()
			const res_s = uni.getSystemInfoSync();
			this.key_height =
				`${res_s.windowHeight - this.inputHeight}px`;
		},
		onHide() {},
		onUnload() {
			uni.offKeyboardHeightChange(); //取消监听键盘高度变化事件，避免内存消耗
		},
		methods: {
			onfanhui() {
				uni.navigateBack()
			},
			compute_input_height() {
				const query = uni.createSelectorQuery().in(this); //这样写就只会选择本页面组件的类名box的
				query.selectAll('.intelligent_input').boundingClientRect(
					data => {
						console.log(data[0].height);
						this.inputHeight = data[0].height
					}).exec();
			},
			// 点击键盘以外的地方收起键盘
			other_click() {
				// 隐藏已经显示的软键盘，如果软键盘没有显示则不做任何操作
				uni.hideKeyboard()
			},
			// 监听键盘高度事件
			keyboardHeightChange() {
				uni.onKeyboardHeightChange((res) => { //监听键盘高度变化
					const res_keyboard = uni.getSystemInfoSync();
					let key_height = res.height - (res_keyboard.screenHeight - res_keyboard.windowHeight +
						res_keyboard.safeAreaInsets.bottom)
					this.bottom = `${res.height ?  key_height : 0 }px`;

					this.compute_input_height()

					if (res.height) {
						this.key_height =
							`${res_keyboard.windowHeight - this.inputHeight - key_height }px`;
					} else {
						this.key_height =
							`${res_keyboard.windowHeight - this.inputHeight}px`;
					}

					console.log(this.key_height);
					this.num = this.msg_list.length;
					this.bottomId = 'dade' + (this.num);
				})
			},
			// 点击回答的高亮，跳转页面
			keyHighlight(data, data_index) {
				// uni.navigateTo({
				// 	url: `./problems?data=${encodeURIComponent(JSON.stringify(data))}`
				// })
			},
			// 输入框聚焦事件
			i_focus() {
				this.fouse = true;
				this.hold_keyboard = true;
				// 换id
				this.controlId = true
			},
			blur() {
				// 换id
				this.controlId = false
			},
			// input发送事件
			async input_send() {
				if (!this.value.toString()) {
					return
				}
				let timer
				if (timer) clearTimeout(timer)
				if (this.boolen) {
					this.boolen = false

					// 增加回答，自己的话
					this.msg_list = [...this.msg_list, {
						left: false,
						msg: this.value,
						data: null
					}]
					// 如果你们没有网络请求，----------------
					if (this.value.match(/你好|您好/)) {
						this.msg_list = [...this.msg_list, {
							left: true,
							msg: '您好，我是小助，您有什么问题可以直接问我哦~',
							data: null
						}]
					} else {
						this.msg_list = [...this.msg_list, {
							left: true,
							msg: '没有找到该问题答案，请换种问法试一试。',
							data: null
						}]
					}
					this.value = '';
					this.num = this.msg_list.length;
					this.bottomId = 'dade' + (this.num);

					timer = setTimeout(() => {
						this.boolen = true
					}, 300)

				}
			}
		}
	}
</script>

<style scoped>
	.tou {
		width: 100%;
		height: 50px;
		background-color: white;
		display: flex;
	}

	.pages_height {
		width: 100%;
		color: #191919;
		background: #F0F0F0;
		font-family: PingFangSC-Regular, PingFang SC;
	}

	.intelligent_main {
		height: 100vh;
	}

	.intelligent_chat {
		height: 90vh;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	/* 取消滚动条 */
	.intelligent_chat ::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
		display: none;
	}

	/* 最上边两句话 */
	.intelligent_chat_view0 {
		padding-top: 30rpx;
	}

	.intelligent_chat>view {
		width: 100%;
		background-color: red;
	}

	.intelligent_chat>view>view {
		width: 100%;
	}

	.robot_word {
		color: #191919;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.patient_word {
		color: #fff;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}

	.patient_word>view,
	.robot_word>view {
		max-width: 600rpx;
		margin-bottom: 20rpx;
		line-height: 42rpx;
		font-size: 30rpx;
		padding: 15rpx 20rpx;
		box-sizing: border-box;
		white-space: pre-wrap;
	}

	/* 患者问题 */
	.patient_word>view {
		/* background: #F07828; */
		background: linear-gradient(120deg, #00cccc, #33cc66);
		border-radius: 15rpx 0 15rpx 15rpx;
	}

	/* 机器人回答 */
	.robot_word>view {
		background: #FFFFFF;
		border-radius: 0 15rpx 15rpx 15rpx;
	}

	.keyHighlight {
		font-size: 30rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		line-height: 42rpx;
		margin-top: 10rpx;
	}


	/* 输入框 */
	.intelligent_input {
		width: 100%;
		height: 100rpx;
		min-height: 98rpx;
		background: #F7F7F7;
		position: fixed;
		bottom: 0px;
		display: flex;
		box-sizing: content-box;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.intelligent_input>input {
		width: 80%;
		background: #FFF;
		margin: 15rpx 30rpx;
		padding: 13rpx 20rpx;
		box-sizing: border-box;
		height: 70%;
		min-height: 68rpx;
		border-radius: 10rpx;
	}

	.intelligent_input>input::placeholder {
		font-size: 30rpx;
		color: #C8C8C8;
	}

	.input_send {
		margin-right: 20rpx;
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: flex-end;
	}

	.input_send>image {
		width: 42rpx;
		height: 42rpx;
		padding: 10rpx;
	}
</style>
